<template>
  <div class="nav_bar">
    <div class="nav_bar_content">
      <div class="logo" @click="homeClick">
        <img src="" alt="">
      </div>
      <div class="center">
        <slot name="center"></slot>
      </div>
      <div v-if="isLogin">
        <div class="logout" @click="logout">注销</div>
        <div class="profile" @click="toProfile">个人中心</div>
        <div class="publish" title="点击发布面经" @click="publishClick"></div>
      </div>
      <div v-else>
        <div class="register" @click="registerClick">注册</div>
        <div class="login" @click="loginClick">登录</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {routerReplace, routerReplaceTimeout} from "common/Utils";

  export default {
    name: "NavBar",
    computed: {
      isLogin() {
        return this.$store.state.userInfo.isLogin
      }
    },
    methods: {
      registerClick() {
        routerReplace(this.$router, '/register')
      },
      loginClick() {
        routerReplace(this.$router, '/login')
      },
      publishClick() {
        routerReplace(this.$router, '/publish')
      },
      homeClick() {
        routerReplace(this.$router, '/home')
      },
      toProfile() {
        routerReplace(this.$router, '/profile/' + this.$store.state.userInfo.id)
      },
      logout() {
        this.$confirm('退出登录，是否确定', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 退出登录，清空数据
          this.$toast.show('已退出登录', 'default', 1000)
          this.$store.commit('setUserInfo','');//更新userInfo
          routerReplaceTimeout(this.$router, '/home', 1000)
        }).catch(() => {});
      }
    }
  }
</script>

<style scoped>
  .nav_bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    width: 100%;
    height: 64px;
    background-color: #002766;
    color: #fff;
    line-height: 64px;
  }

  .nav_bar_content {
    width: 1100px;
    height: 64px;
    margin: 0 auto;
  }

  .logo {
    float: left;
    width: 150px;
    height: 40px;
    margin-top: 12px;
    /*background-color: #fff;*/
    /*background-image: url("https://i.ibb.co/sjM7w1P/query-logo.png");*/
    background-image: url("../../../assets/img/logo.png");
    background-size: 120px 40px;
    background-repeat: no-repeat;
    background-position: center;
  }

  .center {
    float: left;
  }

  .publish {
    float: right;
    padding: 1px 30px;
    font-family: icomoon;
    font-size: 18px;
  }

  .profile {
    float: right;
    margin-right: 30px;
    font-size: 16px;
  }

  .logout {
    float: right;
    margin-right: 15px;
    font-size: 16px;
  }

  .login {
    float: right;
    margin-right: 15px;
    font-size: 16px;
  }

  .register {
    float: right;
    margin-right: 15px;
    font-size: 16px;
  }

  .login:hover,
  .register:hover,
  .publish:hover,
  .profile:hover,
  .logout:hover {
    color: #91d5ff;
    cursor: pointer;
  }
</style>
